<template>
    <page>
        <m-img :src="image" style="display: block"></m-img>
        <div class="white-bg px12 pt16">
            <p class="c7" flex="cross:center">
                <i class="iconfont icon-jifen f22 mr4"></i>
                <span class="f22">{{origPrice}}</span>
                <span class="f12 ml20 _bd corner p2">数量有限，送完即止</span>
            </p>
            <p class="f20 mt18">{{title}}</p>
            <p class="f13 text3 mt20">{{des}}</p>
            <div flex="main:justify" class="text2 f14 h44 mt10">
                <span>库存: {{total}}</span>
                <span>已兑换: {{soldNum}}</span>
            </div>
        </div>

        <div class="white-bg px12 mt20">
            <div flex="main:justify" class="h50 bdb"><span>兑换数量</span>
                <m-spinner v-model="count" :max="total"/>
            </div>
            <div flex="box:mean" class="py16">
                <m-button class="mr16 md" @click.native="submit" :class="{disabled: total<1}">{{total<1 ? '没有库存':'立即兑换'}}</m-button>
                <m-button class="md" bgClass="bg1" @click.native="addCar" :class="{disabled: total<1}">加入购物车</m-button>
            </div>
        </div>
    </page>
</template>
<script>
  import { Cell, Group } from 'vux'
  import store from 'store2'

  export default {
    data () {
      const params = this.$route.params
      return {
        count: 1,
        ...params,
        origPrice: null,
        total: null,
        soldNum: null,
        image: null,
        title: null,
        des: null,
        car_number: 0,
        shopName: null
      }
    },
    computed: {},
    created () {
      this.getDetail()
    },
    methods: {
      getForm () {
        const {id: commodityId, origPrice: price, origPrice, count, title, image} = this

        const {shopName, coupon_id: couponId, shopId} = this
        return {
          list: [
            {
              commodityId,
              price,
              detailTotle: origPrice * count,
              number: count,
              title: title,
              image: image,
            }
          ],
          order: {
            userId: this.$store.getters.userInfo.id,
            shopName: this.shop.shopName,
            couponId: this.coupon_id,
            createDate: new Date(),
            isDel: false,
            payMoney: count * origPrice,
            payTime: new Date(),
            state: 1,
            shopId: this.shop.id
          }
        }
      },
      // 获取详情
      async getDetail () {
        const {id} = this.$route.query
        let r = await this.$get_loading('/commodity/getCommodityById', {id})
        Object.assign(this, r.obj)
      },
      // 确认兑换
      async submit () {
        let formData = this.getForm()
        let body = await this.$post_json_loading('order/addOrder', formData)
        if (body.code == 200 && !isEmpty(body.obj)) {
          this.$router.push({name: 'store_confirmOrder', query: {id: body.obj}})
        } else {
          m_alert('兑换出错')
        }
      },
      // 添加购物车
      addCar () {
        let formData = this.getForm()
        let car = store.get('car') || {list: [], order: {}}

        // 判断是否修改 order
        car.order = formData.order
        if (car.order.shopId != formData.order.shopId) {
          car.list = []
        }
        // 添加或修改list
        formData.list.forEach((e) => {
          let index = car.list.findIndex((e2) => {
            return e2.commodityId == e.commodityId
          })

          let item = car.list[index]

          if (item == undefined) {
            car.list.push(e)
          } else {
            e.number += item.number
            e.detailTotle += item.detailTotle
            car.list[index] = e
          }
        })
        let payMoney = 0
        car.list.forEach(e => {
          payMoney += e.detailTotle
        })
        car.order.payMoney = payMoney
        store.set('car', car)
        // this.refreshCarNumber()
        this.$vux.toast.text('添加购物车成功', 'bottom')
      },
      // 更新购物车商品数量
      refreshCarNumber () {
        let car = store.get('car') || {list: [], order: {}}
        this.car_number = 0
        car.list.forEach(e => {
          this.car_number += e.number
        })
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
